<template>
  <div class="login" :style="{'background': bgImg}">
    <div class="content">
      <span class="tip">
        测试账号:admin 密码:123456 
        <br>
        <span @click="quickLogin">点击一键登录</span>
      </span>
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="rules"
        size="large"
      >
        <el-form-item label="" prop="account">
          <el-input
            v-model="loginForm.account"
            placeholder="账号"
            :prefix-icon="User"
            clearable
            @keyup.enter="submitLogin"
          />
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            placeholder="密码"
            :prefix-icon="Lock"
            clearable
            @keyup.enter="submitLogin"
          />
        </el-form-item>
        <el-form-item label="" prop="captchaAnswer">
          <el-input
            v-model="loginForm.captchaAnswer"
            placeholder="验证码"
            :prefix-icon="Grape"
            class="captcha"
            clearable
            @keyup.enter="submitLogin"
          />
          <img :src="captcha.base64String" alt="点击刷新验证码" @click="doGetCaptcha" title="点击刷新">
        </el-form-item>
        <div class="option-container">
          <label><input type="checkbox" v-model="rememberMe" @keyup.enter="submitLogin"/>记住密码</label>
        </div>
        <el-button type="success" @click="submitLogin">登陆</el-button>
        <el-button type="primary" @click="goRegister">注册</el-button>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "@vue/reactivity";
import { Lock, User, Grape } from '@element-plus/icons-vue'
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { useRouter } from "vue-router";
import { getCaptcha, login, verifyCaptcha } from "../request/user";
import { startIn } from '../util/chore'
const router = useRouter()
const bgImg = ref<string>('')
const loginFormRef = ref<FormInstance>()
const rememberMe = ref(true)
const testUser = {
  account: 'admin',
  password: '123456'
}
const captcha = reactive({
  id: '',
  base64String: '',
  answer: ''
})
const loginForm = reactive({
  account: '',
  password: '',
  captchaAnswer: '',
})
const rules = reactive<FormRules>({
  account: [
    {
      required: true,
      message: "请输入账号",
      trigger: 'change',
    }
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: 'change',
    }
  ],
  captchaAnswer: [
    {
      required: true,
      message: "请输入验证码",
      trigger: 'change',
    }
  ]
})
async function quickLogin(){
  let response = await login(testUser.account, testUser.password)
  let user = response.data
  if(!user.account){
    ElMessage({type:'error', message:'账号或密码错误'})
    doGetCaptcha()
  }
  else {
    startIn(user, true)
    router.push('/')
  }
}
function submitLogin(){
  loginFormRef.value?.validate(async (isValid, errors) => {
    if(isValid){
      let captchaResp = await verifyCaptcha(captcha.id,loginForm.captchaAnswer)
      if(!captchaResp.data.success){
        ElMessage({type: "error", message: "验证码错误或已失效，请重试！"})
        doGetCaptcha()
        return
      }
      let response = await login(loginForm.account, loginForm.password)
      let user = response.data
      if(!user.account){
        ElMessage({type:'error', message:'账号或密码错误'})
        doGetCaptcha()
      }
      else {
        startIn(user, rememberMe.value)
        router.push('/')
      }
    }
    else {
      ElMessage({
        type: 'error',
        message: '请输入有效的信息！！'
      })
    }
  })
}
function goRegister(){
  router.push({name:'Register'})
}
function doGetCaptcha(){
  getCaptcha().then(
    val => {
      captcha.base64String = val.data.base64String
      captcha.id = val.data.id
    }
  )
}
doGetCaptcha()
</script>

<style scoped>

</style>